"use client";

// import React, { useEffect } from 'react';
// import { Chart } from '@antv/g2';
// import '@antv/data-set';

// const BasicRingChart: React.FC = () => {
//   useEffect(() => {
//     // 数据
//     const data = [
//       { item: '事例一', count: 40, percent: 0.4 },
//       { item: '事例二', count: 21, percent: 0.21 },
//       { item: '事例三', count: 17, percent: 0.17 },
//     ];

//     // 创建图表
//     const chart = new Chart({
//       container: 'mountNode',
//     //   forceFit: true,
//       height: window.innerHeight,
//     //   animate: false,
//     });

//     chart.data(data);
//     chart.scale('percent', {
//       formatter: (val: number) => `${val * 100}%`,
//     });

//     chart.coordinate('theta', {
//       radius: 0.75,
//       innerRadius: 0.6,
//     });

//     chart.tooltip({
//       showTitle: false,
//       itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
//     });

//     // // 辅助文本
//     chart.guide().html({
//       position: ['50%', '50%'],
//       html: '<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">主机<br><span style="color:#8c8c8c;font-size:20px">200</span>台</div>',
//       alignX: 'middle',
//       alignY: 'middle',
//     });

//     const interval = chart
//     .intervalStack()
//     .position('percent')
//     .color('item')
//       .label('percent', {
//         formatter: (val: string, item: any) => `${item.point.item}: ${val}`,
//       })
//       .tooltip('item*percent', (item: string, percent: number) => {
//         return {
//           name: item,
//           value: `${percent * 100}%`,
//         };
//       })
//       .style({
//         lineWidth: 1,
//         stroke: '#fff',
//       });

//     chart.render();
//     interval.setSelected(data[0]);

//     // 清理图表
//     return () => {
//       chart.destroy();
//     };
//   }, []);

//   return (
//     <div>
//       <style>
//         {`
//           ::-webkit-scrollbar { display: none; }
//           html, body { overflow: hidden; height: 100%; margin: 0; }
//         `}
//       </style>
//       <div id="mountNode" />
//     </div>
//   );
// };

// export default BasicRingChart;

import React from "react";
import { Pie } from "@ant-design/plots";
import { useTranslations } from "next-intl";
const PieChart = () => {
  const total = 44000;
  const t = useTranslations("index");
  const totalText = t("Accumulated energy");
  const config = {
    data: [
      { type: "第一季度", value: 27 },
      { type: "第二季度", value: 25 },
      { type: "第三季度", value: 18 },
    ],
    angleField: "value",
    colorField: "type",
    innerRadius: 0.7,
    radius: 0.9,
    label: {
      text: "value",
      style: {
        fontWeight: "bold",
      },
    },
    legend: {
      // visible: true, // 隐藏图例
      // position: 'right', // 设置图例位置为右侧
      // offsetX: 30, // 向右移动 10 像素
      color: {
        title: false,
        position: 'right',
        rowPadding: 5,
      },
    },
    annotations: [
      {
        type: "text",
        style: {
          text: `${total}\n${totalText}`,
          x: "50%",
          y: "50%",
          textAlign: "center",
          fontSize: 20,
          fontStyle: "bold",
        },
      },
    ],
    width: 400, // 设置宽度
    height: 380, // 设置高度
  };

  return <Pie {...config} />;
};

export default PieChart; // 导出组件
